<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上载演示</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>文件上传案例演示:</h1>
<form id="fileForm" method="post" enctype="multipart/form-data" onsubmit="return doUpload()">
    <div>
        <label>上传文件
            <input id="uploadFile" type="file" name="uploadFile">
        </label>
    </div>
    <button type="submit">上传文件</button>
</form>
</body>
<script>
    //jquery代码的表单提交事件
    function doUpload(){
        //获得用户选中的所有图片(获得数组)
        let files=document.getElementById("uploadFile").files;
        if(files.length>0){
            //获得用户选中的唯一图片(从数组中取出)
            let file=files[0];
            //开始上传这个图片
            //由于上传代码比较多,不想和这里其它代码干扰,所以定义一个方法调用
            upload(file);
        }
        //阻止表单提交效果
        return false;
    };
    // 将file上传到服务器的方法
    function upload(file){

        //定义一个表单
        let form=new FormData();
        //将图片添加到表单中
        form.append("uploadFile",file);
        //异步提交
        axios({

            url:"http://localhost:9000/sca/resource/upload/",
            method:"post",
            data:form
        }).then(function(response){
            let resoult=response.data;
            if (resoult.error&&resoult.error==520){
                alert(resoult.message);
                return;
            }
            alert("upload ok")
            console.log(response)
        }).catch(function(error) {
            console.log(error)
        })
    }
</script>
</html>